<template>
  <div class="mywawa">
    <router-link class="address yes" to="/address-list" v-if="defaultAddress.id">
      <div class="icon"><img src="../../assets/images/addresslow.png"/></div>
      <div class="text">
        <div><label>{{defaultAddress.consignee}}</label><label>{{defaultAddress.phone}}</label></div>
        <div class="addressde">
          {{defaultAddress.province.name}}{{defaultAddress.city.name}}{{defaultAddress.district.name}}{{defaultAddress.address}}
        </div>
      </div>
    </router-link>
    <router-link class="address no" to="/add-address" v-else>
      <div class="icon"><img src="../../assets/images/addresslow.png"/></div>
      <div class="text">点击添加收货地址</div>
    </router-link>
    <div class="mylist" v-infinite-scroll="getlista" infinite-scroll-disabled="nonext" infinite-scroll-distance="10"
         infinite-scroll-immediate-check="false" res="infiniteLoading">
      <div class="myitem" v-for="(item,index) in list" :id="item.id" v-if="item.ware_status!=0" :key="index">
        <div class="imgclass"><img :src="item.ware_image"/></div>
        <div class="textclass">
          <p class="title">{{item.ware_name}}</p>
          <p class="time">抓取时间 {{item.created_at}}</p>
        </div>
        <div class="btn">
          <div class="button" v-if="item.ware_status==1">待领取</div>
          <div class="tag" v-if="item.ware_status==2">已领取</div>
        </div>
      </div>
      <div class="noaddress" v-if="list.length==0">
        暂时还没有记录！
      </div>
    </div>
    <div class="allget" :class="{'sheclas':!footshow}">
      <div class="disabled get-wawa" v-if="unclaimed==0">一键领取（{{unclaimed}}）</div>
      <div @click="getwawa" class="get-wawa" v-else>一键领取（{{unclaimed}}）</div>
    </div>
  </div>
</template>
<script>
  import {InfiniteScroll} from 'mint-ui';
  import {MessageBox} from 'mint-ui';

  import Wx from '@/assets/js/weixin';
  import store from 'store';
  import {Indicator} from 'mint-ui';
  import {Toast} from 'mint-ui'; //提示

  export default {
    data: function () {
      return {
        list: [], //列表数据
        page: 1, //页码
        nonext: true, //下拉加载开关
        unclaimed: 0, //为领数量
        doll_record_ids: [],
        address_id: '',
        idsArr: [],
        defaultAddress: {},
        token: this.$route.query.token,
        headerData: {},
        footshow:true
      }
    },
    components: {
      'MessageBox': MessageBox,
    },
    created: function () {
      if(this.token != null){
        this.footshow=false;
      }
      Wx.hide();
      this.getlista();
      api.fetch('/api/addresses/default').then((res) => {
        if (res) {
          this.defaultAddress = res.data;
          this.address_id = res.data.id;
        }
      });
    },
    methods: {
      getlista: function () {
        Indicator.open('加载中...');
        var smData = {
          page: this.page,
          per_page: 15,
        };
        api.fetch('/api/doll-records', {
          params: smData,
        }).then((res) => {
          this.unclaimed = res.meta.receivable_num
          Indicator.close();
          if (res.meta.pagination.count > 0) {
            if (res.meta.pagination.per_page > res.meta.pagination.count) {
              this.nonext = true;
            } else {
              this.nonext = false;
            }
            if (this.list.length == 0) {
              this.list = res.data;
              this.page = this.page + 1;
            } else {
              this.list = this.list.concat(res.data);
              this.page = this.page + 1;
            }
            this.getNum(this.list);
          }
        }).catch();
      },
      getNum: function (arr) {
        var newlist = [], j = 0, idArr = [];
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].ware_status == 1) {
            newlist[j] = i;
            j++;
            if (idArr == undefined) {
              idArr[i] = (this.list[i].id);
            } else {
              idArr[i] = (this.list[i].id);
            }
          }
          if (i == this.list.length - 1) {
            this.idsArr = newlist;
            this.doll_record_ids = idArr;
          }
        }
      },
      getwawa: function () {
        var that = this;
        if (this.address_id) {
          var smData = {
            doll_record_ids: this.doll_record_ids,
            address_id: this.address_id
          };
          api.fetch('/api/orders', {
            method: 'post',
            data: smData,
          }).then((res) => {
            this.unclaimed = 0;
            for (var i = 0; i < this.idsArr.length; i++) {
              this.list[this.idsArr[i]].ware_status = 2;
            }
            MessageBox({
              title: '提示',
              message: '领取完成，你可以',
              showCancelButton: true,
              confirmButtonText: '查看订单',
              confirmButtonClass: 'f-28',
              cancelButtonClass: 'f-28'
            }).then(action => {
              if (action != 'cancel') {
                that.$router.push('/order-list');
              }
            }, action => {
            });
          }).catch(err => {
            Toast(err.response.data.message)
          });
        } else {
          Toast('请先添加收货地址')
        }
      }
    }
  }
  import api from '@/assets/js/api'
</script>
<style lang="less" scoped>
  .sheclas{
    bottom:0 !important;
  }

  .address {
    display: flex !important;
    flex-direction: row;
    padding: 0.3rem 0.4rem;
    justify-content: flex-start;
    position: relative;
    background: #fff url('../../assets/images/borderstyle.png') repeat-x left bottom;
    background-size: 0.67rem 0.05rem;
    .icon {
      margin-right: 0.07rem;
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
    .text {
      width: 6.2rem;
      margin-right: 0.13rem;
      line-height: 0.5rem;
      label {
        font-weight: bold;
        font-size: 0.3rem;
        &:first-child {
          margin-right: 0.3rem;
        }
      }
      .addressde {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.26rem;
        color: #949699;
      }
    }
    &.no {
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    &.yes:after {
      content: '';
      position: absolute;
      width: .24rem;
      height: .24rem;
      border-top: .03rem solid #ccc;
      right: .3rem;
      border-right: .03rem solid #ccc;
      top: 50%;
      transform: rotate(45deg) translate(-50%, -50%);
    }
  }

  .mywawa {
    min-height: 100%;
    background-color: #efefef;
    .noaddress {
      text-align: center;
      height: 1rem;
      line-height: 1rem;
      background: #f4f5f5;
    }
    padding-bottom: 2.26rem;
    .allget {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.1rem;
      overflow: hidden;
      padding: 0 0.3rem;
      .get-wawa {
        width: 100%;
        background: #09bb07;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
        font-size: 0.32rem;
        color: #fff;
        border: none;
        border-radius: 0.08rem;
      }
    }
    .mylist {
      padding: 0.3rem;
      .myitem {
        background: #fff;
        border-radius: 0.2rem;
        width: 100%;
        height: 1.4rem;
        margin-bottom: 0.3rem;
        padding: 0.3rem 0.3rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .imgclass {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 0.8rem;
            height: 0.8rem;
            object-fit: cover;
          }
        }
        .textclass {
          margin-left: -0.2rem;
          .title {
            color: #000;
            font-size: 0.28rem;
            width: 4rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 0.3rem;
          }
          .time {
            font-size: 0.24rem;
            color: #a3a3a3;
            padding-left: 0.3rem;
            margin-top: 0.15rem;
          }
        }
        .btn {
          position: relative;
          width: 1.3rem;
          display: flex;
          justify-content: flex-end;
          .button {
            white-space: nowrap;
            height: 0.8rem;
            color: #ffb52b;
            border-radius: 0.04rem;
            background: #fff;
            border: none;
            font-size: 0.28rem;
          }
          .tag {
            width: 1.14rem;
            height: 1.2rem;
            text-align: right;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 0.28rem;
            color: #999;
          }
        }
      }

    }
  }
</style>
